<!-- 添加教师 -->
<template>
  <section class="add">
    <el-form ref="form" :model="form"  :rules="rules" label-width="80px">

      <el-form-item prop="teacherName" label="姓名">
            <el-input v-model="form.teacherName" @input="checkFormFilled"placeholder="请输入姓名"></el-input>
          </el-form-item>

          <el-form-item prop="institute" label="学院">
            <el-input v-model="form.institute"@input="checkFormFilled"placeholder="请输入学院名称"></el-input>
          </el-form-item>

          <el-form-item prop="sex" label="性别">
            <el-select v-model="form.sex" @change="checkFormFilled"placeholder="请选择性别">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
            <!-- <el-input v-model="form.sex":disabled="!form.institute" @input="checkFormFilled"></el-input> -->
          </el-form-item>

          <el-form-item prop="tel":rules="rules.tel" label="电话号码">
            <el-input maxlength="11" v-model="form.tel" @input="checkFormFilled"  placeholder="请输入11位手机号"></el-input>
                <!-- 显示错误提示信息 -->
        <!-- <template slot="error" v-if="!$refs.form.validateState['tel'].valid">{{ $refs.form.validateState['tel'].message }}</template> -->
        <!-- <template slot="error">
          <span v-if="$refs.form.validateState && !$refs.form.validateState['tel'].valid">{{ $refs.form.validateState['tel'].message }}</span>
        </template> -->
          </el-form-item>

          <el-form-item prop="email":rules="rules.email" label="邮箱">
            <el-input v-model="form.email"  @input="checkFormFilled" placeholder="请输入邮箱"></el-input>
          </el-form-item>

          <el-form-item prop="pwd" label="密码">
            <el-input v-model="form.pwd" @input="checkFormFilled" placeholder="请输入密码" ></el-input>
          </el-form-item>

          <el-form-item prop="cardId":rules="rules.cardId" label="身份证号">
            <el-input  maxlength="18" v-model="form.cardId" @input="checkFormFilled" placeholder="请输入18位身份证号"></el-input>
          </el-form-item>

          <el-form-item prop="type" label="职称">
            <el-select v-model="form.type" @change="checkFormFilled" placeholder="请选择职称">
          <el-option label="助教" value="助教"></el-option>
          <el-option label="讲师" value="讲师"></el-option>
          <el-option label="副教授" value="副教授"></el-option>
          <el-option label="教授" value="教授"></el-option>
          <el-option label="特聘教授" value="特聘教授"></el-option>
        </el-select>
            <!-- <el-input v-model="form.type" @input="checkFormFilled" placeholder="请输入职称"></el-input> -->
          </el-form-item>
      <el-form-item>
        <el-button type="primary" :disabled="!formFilled" @click="onSubmit()">立即创建</el-button>
        <el-button type="text" @click="cancel()">取消</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
export default {
  data() {
    return {
      form: { //表单数据初始化
        teacherName:null,
        grade: null,
        major: null,
        clazz: null,
        institute: null,
        tel: null,
        email: null,
        pwd: null,
        cardId: null,
        sex: null,
        role: 2
      },
      rules:{
            teacherName:[{required:true,message:"请输入姓名",trigger:'blur'}],
            institute:[{required:true,message:"请输入学院名称",trigger:'blur'}],
            sex:[{required:true,message:"请输入性别",trigger:'blur'}],
            tel:[{required:true,message:"请输入电话号码",trigger:'blur'},
            {
            validator: (rule, value, callback) => {
              if (value.trim() === '') {
                // callback(new Error('请输入手机号码'))
              } else if (!(/^1[3456789]\d{9}$/.test(value))) {
                callback(new Error('您输入手机号码不正确'))
              } else {
                  callback()
                }
            },
              trigger: 'change'
          },],
            email:[{required:true,message:"请输入邮箱",trigger:'blur'},
                  {validator: (rule, value,callback) =>{//验证邮箱
                      if(value.trim() === ''){
                         // callback(new Error('请输入邮箱'))
                      }else if(!(/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(value))){
                        callback(new Error('您输入邮箱号不正确'))
                      }else{
                        callback()
                      }
                    },
                      trigger: 'change'
                  }
          ],
            pwd:[{required:true,message:"请输入密码",trigger:'blur'}],
            cardId:[{required:true,message:"请输入身份证号",trigger:'blur'},
            {
            validator: (rule, value, callback) => {
              if (value.trim() === '') {
                // callback(new Error('请输入手机号码'))
              } else if (!(/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/.test(value))) {
                callback(new Error('您输入身份证号不正确'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }],
            type:[{required:true,message:"请输入职称",trigger:'blur'}],
      },
      formFilled: false, // 表单是否填写完毕的标识，默认为 false
      telIsValid: false, // 手机号是否合法
      emailIsValid: false, // 邮箱是否合法
      cardIdIsValid: false // 身份证号是否合法
    };
    
  },
 
  methods: {
    // 检查表单是否填写完整和格式是否正确
    checkFormFilled() {
      const { teacherName, institute, sex, tel, email, pwd, cardId, type } = this.form;
      this.formFilled = teacherName && institute && sex && tel && email && pwd && cardId && type &&
        /^1[3456789]\d{9}$/.test(tel) &&
        /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(email) &&
        /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/.test(
          cardId
        );
    },
     // 数据提交
     onSubmit() {
      // 先检查表单是否填写完整和格式是否正确
      if (this.formFilled) {
        this.$axios
          .post('/api/teacher', this.form)
          .then(res => {
            if (res.data.code === 200) {
              this.$message({
                message: '数据添加成功',
                type: 'success'
              });
              this.$router.push({ path: '/teacherManage' });
            }
          })
          .catch(err => {
            console.error('提交失败', err);
          });
      } else {
        this.$message.error('请填写完整且正确的表单');
      }
    },
  
    cancel() { //取消按钮
      this.form = {}
    },

    
  },

};
</script>
<style lang="less" scoped>
.add {
  padding: 0px 40px;
  width: 400px;
}
</style>

